<template>
  <div :class="className" :style="{ width: w + 'px', height: h + 'px', left: x + 'px', top: y + 'px' }">
    <!-- style -->
    <div v-html="css"></div>

    <div class="content flex-column">
      <div class="header flex-a-c" v-if="datas.show_header">
        <div class="border-box"></div>
        <div class="title f-bold t-l">{{ datas.title }}</div>
      </div>
      <div class="list t-l flex-column">
        <div class="item flex-a-c flex-j-sb">
          <div class="rank">排名</div>
          <div class="name">商品来源</div>
          <div class="name">商品名称</div>
        </div>
        <div style="flex: 1; overflow: hidden;" v-if="isShow && list.length > 0">
          <scroll-board :data="list" :pageSize="20" :isLoadMore="false">
            <!-- 自定义列表项内容 -->
            <template #item="{ item, index }">
              <div class="item flex-a-c flex-j-sb">
                <div class="rank" v-if="index < 3">
                  <img :src="`${imgPath}platform-screen/platform-screen-0${index + 1}.png`" alt="">
                </div>
                <div class="rank" v-if="index > 2">{{ item.ranking }}</div>
                <div class="name line-clamp-1">{{ item.source }}</div>
                <div class="name line-clamp-1">{{ item.title }}</div>
              </div>
            </template>
          </scroll-board>
        </div>
        <div class="flex-a-c flex-j-c" v-if="list.length == 0" style="height: 100px;background: #0D2441;">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
// 自定义样式
const css = function() {
  if (this.datas.title_color) {
    const { title_color, title_size, radius } = this.datas;

    return `
      .component-${this.id} .content {
            border-radius: ${radius}px;
        }
        .component-${this.id} .content .header .title{
            color:${title_color};
            font-size:${title_size}px;
        }

    `;
  }
};

export default {
  data() {
    return {
      isShow: false,
      list: [],
      imgPath: ''
    };
  },
  props: ["id", "datas", "styles", "w", "h", "x", "y"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  components: {
    scrollBoard: () => import("./scroll-board.vue")
  },
  methods: {
    // 获取组件数据
    async getComponentData() {
      let { result, msg, data } = await $http.post(
        "plugin.platform-screen.frontend.controllers.screen.index.get-module-data",
        {
          module_type: 3,
          search: { page_size: 20 }
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.setData(data.data);
    },
    setData(data) {
      this.isShow = false;
      this.list = data;
      this.$nextTick(() => {
        this.isShow = true;
      });
    }
  },

  mounted() {
    this.imgPath = this.$store.state.imgPath;
    this.$nextTick(() => {
      this.getComponentData();
    });
  },
  destroyed() {}
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.component-wrapper {
  position: absolute;
  min-width: 200px;
  min-height: 200px;
  overflow: hidden;
}
.content {
  height: 100%;
  background: linear-gradient(180deg, #050f27 0%, #0d2441 100%);
  color: #ffffff;
  overflow: hidden;
  .header {
    height: 2.5rem;
    width: 100%;
    background: linear-gradient(90deg, #536d8f 0%, rgba(13, 36, 65, 0) 100%);
    .border-box {
      width: 3px;
      height: 100%;
      background: linear-gradient(180deg, #2b6dcc 0%, #d6efe7 100%);
      border-radius: 0px 0px 0px 0px;
    }
    .title {
      flex: 1;
      margin: 0 0.75rem;
    }
  }
  .list {
    width: 100%;
    flex: 1;
    overflow: hidden;
    padding: 0 0.75rem;
    border: 1px solid #536d8f;
    .item {
      height: 2.5rem;
      padding: 0 0.75rem;
      &:nth-child(2n) {
        background: #0d2441;
      }
      .rank {
        width: 100px;
        img {
          margin-left: -8px;
        }
      }
      .name {
        flex: 1;
      }
    }
  }
}
</style>
